<template>
  <div>
    <el-table :data="data" style="width: 100%" border row-key="id" default-expand-all>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="标识" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="address" label="操作">
        <el-table-column>
          <template #default="scope">
            <div style="color:#409eff;display: flex;width: 100%;">
              <div style="cursor: pointer;margin-right: 15px;" v-show="scope.row.pid == 0"
                @click="handleAdd(scope.$index, scope.row)">添加
              </div>
              <div style="cursor: pointer;margin-right: 15px;" @click="handleEdit(scope.$index, scope.row)">编辑</div>
              <div style="cursor: pointer;margin-right: 15px;" @click="handleDelete(scope.$index, scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" :title="flagalert ? '添加' : '修改'" width="500">
    <span>
      <Jurisdictionalertform :rules="rules" :ruleForm="RemForm" :submitForm="submitForm" g :offalert="offalert" />
    </span>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import Jurisdictionalertform from "./jurisdictionalertform.vue";
import { deleteRole, updateRole, addRole } from "../api/jurisdiction";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
let y = defineProps(["data", "render2"]);
let dialogVisible = ref(false);
let RemForm: any = ref({
  name: "",
  code: "",
  description: "",
  enVisible: '',
  pid: 0,
  type: 0
});
let flagalert = ref(false)
watchEffect(() => {
  if (dialogVisible.value == false) {
    RemForm.value = {
      name: "",
      code: "",
      description: "",
      enVisible: '',
      pid: 0,
      type: 0
    };
  }
})
const handleEdit = (index: number, row: any) => {
  flagalert.value = false
  dialogVisible.value = true;
  RemForm.value = {
    name: row.name,
    code: row.code,
    description: row.description,
    enVisible: Number(row.enVisible),
    id: row.id,
    pid: row.pid,
    type: row.type
  };
};
const handleAdd = (index: number, row: any) => {
  flagalert.value = true

  dialogVisible.value = true
  RemForm.value.pid = row.id
};
interface RuleForm {
  name: string;
  code: string;
  enVisible: string,
  description: string;
  pid: number
  type: number
}
const rules = ref<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入角色标识", trigger: "blur" }],
});
const submitForm = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      console.log(flagalert.value);

      if (flagalert.value) {
        addRole(RemForm.value).then((res: any) => {
          if (res.data.code == 10000) {
            ElMessage({
              message: res.data.message,
              type: "success",
            });
          } else {
            ElMessage({
              message: res.data.message,
              type: "warning",
            });
          }
          y.render2();
          dialogVisible.value = false;
        })

      } else {

        updateRole(RemForm.value.id, RemForm.value).then((res: any) => {
          if (res.data.code == 10000) {
            ElMessage({
              message: res.data.message,
              type: "success",
            });
          } else {
            ElMessage({
              message: res.data.message,
              type: "warning",
            });
          }
          y.render2();
          dialogVisible.value = false;
        });
      }

    }
  });
};



const handleDelete = (index: number, row: any) => {
  console.log("handleDelete", index, row);
  ElMessageBox.confirm(
    '确认删除该条信息?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      deleteRole(row.id).then((res) => {
        y.render2();
        console.log(res);

        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

};

const offalert = () => {
  dialogVisible.value = false;
};
</script>

<style scoped></style>
